<%@ include file="/common/taglibs.jsp" %>

<title><fmt:message key="userList.title"/></title>

<script type="text/javascript" src="<c:url value='/scripts/date.js'/>"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/extii/ext-all.css'/>"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="<c:url value='/scripts/extii/ext-base.js'/>"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="<c:url value='/scripts/extii/ext-all.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/extii/RowExpander.js'/>"></script>

<style type="text/css">
    body .x-panel {
        margin-bottom: 20px;
    }

    .icon-grid {
        background-image: url( ../../../images/extii/shared/icons/fam/grid.png ) !important;
    }

    #button-grid .x-panel-body {
        border: 1px solid #99bbe8;
        border-top: 0 none;
    }

    .add {
        background-image: url( ../../../images/extii/shared/icons/fam/add.gif ) !important;
    }

    .option {
        background-image: url( ../../../images/extii/shared/icons/fam/plugin.gif ) !important;
    }

    .remove {
        background-image: url( ../../../images/extii/shared/icons/fam/delete.gif ) !important;
    }

    .save {
        background-image: url( ../../../images/extii/shared/icons/save.gif ) !important;
    }
    
    .view {
        background-image: url( ../../../images/extii/shared/icons/details.gif ) !important;
    }

    .details .x-btn-text {
        background-image: url( ../../../images/extii/shared/icons/details.gif );
    }
    div#main{
    padding-left: 20px;
    }
            
</style>

<%@ include file="/common/extmenu.jsp" %>

<div id="topic-grid"></div>

<s:hidden id="_locale" value="${pageContext.request.locale.language}"/>
<s:hidden id="_sexlabel" value="%{getText('user.sex')}"/>
<s:hidden id="_sex_male_label" value="%{getText('user.sex.male')}"/>
<s:hidden id="_sex_female_label" value="%{getText('user.sex.female')}"/>
	<s:hidden id="_ispublic" value="%{getText('signup.ispublic')}"/>
		<s:hidden id="_pubyes" value="%{getText('signup.yes')}"/>
			<s:hidden id="_pubno" value="%{getText('signup.no')}"/>
				
				<s:hidden id="_qqmsn" value="%{getText('user.netTouch')}"/>
					<s:hidden id="_mobile" value="%{getText('user.mobile')}"/>
						
						<s:hidden id="_account_msg" value="%{getText('signup.account.message')}"/>
							<s:hidden id="_account_username" value="%{getText('user.username')}"/>
								<s:hidden id="_account_email" value="%{getText('user.email')}"/>
										<s:hidden id="_account_lastName" value="%{getText('user.lastName')}"/>
											<s:hidden id="_account_firstName" value="%{getText('user.firstName')}"/>
												<s:hidden id="_account_idcard" value="%{getText('user.idcard')}"/>
													<s:hidden id="_account_fullname" value="%{getText('activeUsers.fullName')}"/>
														<s:hidden id="_account_enabled" value="%{getText('user.enabled')}"/>
															<s:hidden id="_account_regdate" value="%{getText('user.signup.date')}"/>
																<s:hidden id="_account_note" value="%{getText('user.note')}"/>
																	<s:hidden id="_account_usergroup" value="%{getText('user.user.group')}"/>
															
						<s:hidden id="_p_icreg" value="%{getText('signup.usergroup.person.icreg')}"/>
							<s:hidden id="_p_plant" value="%{getText('signup.usergroup.person.plant')}"/>
								<s:hidden id="_p_base" value="%{getText('signup.usergroup.person.base')}"/>
									<s:hidden id="_p_broker" value="%{getText('signup.usergroup.person.broker')}"/>
										<s:hidden id="_p_expert" value="%{getText('signup.usergroup.person.expert')}"/>
											
											<s:hidden id="_c_company_msg" value="%{getText('signup.company.message')}"/>
												<s:hidden id="_p_person_msg" value="%{getText('signup.person.message')}"/>
													<s:hidden id="_t_team_msg" value="%{getText('signup.team.message')}"/>
														<s:hidden id="_g_goverment_msg" value="%{getText('signup.goverment.message')}"/>
												
											<s:hidden id="_p_icreg_msg" value="%{getText('icreg.message')}"/>
												<s:hidden id="_p_icreg_registerid" value="%{getText('user.registerId')}"/>
													<s:hidden id="_p_icreg_companyname" value="%{getText('user.companyName')}"/>
														<s:hidden id="_p_icreg_registermoney" value="%{getText('user.registerMoney')}"/>
															<s:hidden id="_p_icreg_registercapital" value="%{getText('user.registerCapital')}"/>
																<s:hidden id="_p_icreg_registeryear" value="%{getText('user.registerYear')}"/>
																	
			<s:hidden id="_p_plant_msg" value="%{getText('person.plant.message')}"/>
			<s:hidden id="_p_plant_plantareasqm" value="%{getText('user.personInfo.plantAreaSqm')}"/>
				<s:hidden id="_p_plant_plantareamu" value="%{getText('user.personInfo.plantAreaMu')}"/>
					<s:hidden id="_p_plant_plantinfo" value="%{getText('user.personInfo.plantInfo')}"/>
						
						<s:hidden id="_p_broker_msg" value="%{getText('person.broker.message')}"/>
							<s:hidden id="_p_broker_brokeritems" value="%{getText('user.personInfo.brokerItems')}"/>
								<s:hidden id="_p_broker_brokerinfo" value="%{getText('user.personInfo.brokerInfo')}"/>
									
									<s:hidden id="_p_expert_msg" value="%{getText('person.expert.message')}"/>
									<s:hidden id="_p_expert_expertitems" value="%{getText('user.personInfo.expertItems')}"/>	
									<s:hidden id="_p_expert_resume" value="%{getText('user.personInfo.resume')}"/>
										
										<s:hidden id="_p_contact_msg" value="%{getText('signup.contact.message')}"/>
											<s:hidden id="_p_contact_contactname" value="%{getText('user.contactName')}"/>
												<s:hidden id="_p_contact_contactdept" value="%{getText('user.contactDept')}"/>
													<s:hidden id="_p_contact_contactpost" value="%{getText('user.contactPost')}"/>
														<s:hidden id="_p_contact_phonenumber" value="%{getText('user.phoneNumber')}"/>
																<s:hidden id="_p_contact_website" value="%{getText('user.website')}"/>
																	<s:hidden id="_p_contact_faxNo" value="%{getText('user.faxNo')}"/>
																		
   <s:hidden id="_btn_filter_tip" value="%{getText('button.filter.tip')}"/>																		
   	<s:hidden id="_btn_filter" value="%{getText('button.filter')}"/>																		
  																	
  	<s:hidden id="_general_address" value="%{getText('user.address.person.address')}"/>																		
  		<s:hidden id="_company_address" value="%{getText('user.address.company.address')}"/>	
  			
  			<s:hidden id="_address_address" value="%{getText('user.address.address')}"/>		
  				<s:hidden id="_address_city" value="%{getText('user.address.city')}"/>		
  					<s:hidden id="_address_province" value="%{getText('user.address.province')}"/>		
  						<s:hidden id="_address_postalcode" value="%{getText('user.address.postalCode')}"/>																			
  							<s:hidden id="_address_country" value="%{getText('user.address.country')}"/>			
																		
		<s:hidden id="_c_corpbase" value="%{getText('signup.usergroup.company.corpBase')}"/>
			<s:hidden id="_c_fungus" value="%{getText('signup.usergroup.company.fungus')}"/>
				<s:hidden id="_c_export" value="%{getText('signup.usergroup.company.export')}"/>
					<s:hidden id="_c_tech" value="%{getText('signup.usergroup.company.tech')}"/>
						<s:hidden id="_c_agent" value="%{getText('signup.usergroup.company.agent')}"/>
							<s:hidden id="_c_machine" value="%{getText('signup.usergroup.company.machine')}"/>
								<s:hidden id="_c_store" value="%{getText('signup.usergroup.company.store')}"/>
									<s:hidden id="_c_pack" value="%{getText('signup.usergroup.company.pack')}"/>
										
  <s:hidden id="_t_groupicreg" value="%{getText('signup.usergroup.team.groupIcReg')}"/>										
  	<s:hidden id="_t_g_groupbase" value="%{getText('signup.usergroup.team.groupBase')}"/>									
										
  <s:hidden id="_ug_person" value="%{getText('signup.usergroup.person')}"/>									
  	<s:hidden id="_ug_company" value="%{getText('signup.usergroup.company')}"/>									
  		<s:hidden id="_ug_team" value="%{getText('signup.usergroup.team')}"/>									
  			<s:hidden id="_ug_goverment" value="%{getText('signup.usergroup.goverment')}"/>									
  				
  <s:hidden id="_tap_addition" value="%{getText('tap.addition')}"/>			
  	<s:hidden id="_cotact_companyname_team" value="%{getText('user.companyName.team')}"/>			
  		<s:hidden id="_cotact_companyname_goverment" value="%{getText('user.companyName.goverment')}"/>			

<script type="text/javascript">
	
	var jpageSize = 8;
    var filerTxt = "jron";
    
    function $value(value){
    	return document.getElementById(value).value;
    }

Ext.onReady(function() {

    Ext.BLANK_IMAGE_URL = '../../../images/extii/s.gif';


    Ext.QuickTips.init();


    function formatDates(value) {
        return value ? formatDate(new Date(value["time"]), "yyyy-MM-dd HH:mm:ss a") : '';
    }

    function renderSex(value) {
        if (value == 'MALE') return "<img src='../../../images/extii/shared/icons/fam/user_suit.png'/>";
        else if (value == 'FEMALE') return "<img src='../../../images/extii/shared/icons/fam/user_female.png'/>";
        else return "<img src='../../../images/extii/shared/icons/fam/member.png'/>";
    }
    
    function renderRealname(value,p,r){
    	//_locale = document.getElementById('_locale').value;
    	_locale = $value('_locale');
    	if(_locale == "zh") return r.data.lastName+value;
    	else return value + " " + r.data.lastName;
    }
    
    function renderEmail(value){
    	return String.format('<b><a href="mailto:{0}">{0}</a></b>',value);
    }
    
    function renderEnabled(value){
    	if(value)return String.format('<input type="checkbox" disabled="disabled" checked="checked"/>');
    	else return String.format('<input type="checkbox" disabled="disabled"/>');
    }

    var NewAccount = Ext.data.Record.create([
        {name: 'id', type: 'int'},
        {name: 'regDate', mapping: 'regDate', type: 'date',convert :formatDates},
        {name: 'enabled', type: 'boolean'},
        {name: 'netTouch', type: 'string'},
        {name: 'username', type: 'string'},
        {name: 'sex',type: 'string'},
        {name: 'email', type: 'string'},
        {name: 'firstName', type: 'string'},
        {name: 'lastName', type: 'string'},
        {name: 'companyName', type: 'string'},
        {name: 'contactName',type: 'string'},
        {name: 'contactPost',type: 'string'},
        {name: 'contactDept',type: 'string'},
        {name: 'phoneNumber', type:'string'},
        {name: 'password',type: 'string'},
        {name: 'remark',type:'string'},
        {name: 'mobile', type:'string'},
        {name: 'mobilePub', type:'boolean'},
        {name: 'netTouchPub', type:'boolean'},
        {name: 'faxNo', type:'string'},
        {name: 'website',type:'string'},
        {name: 'idcard',type:'string'},
        {name: 'userGroup', type: 'string'},
        {name: 'registerId', type: 'string'},
        {name: 'companyName', type: 'string'},
        {name: 'registerYear', type: 'string'},
        {name: 'registerMoney', type: 'string'},
        {name: 'registerCapital', type: 'string'},
        {name: "address", mapping:"address.address", type: "string"},
        {name: "province", mapping:"address.province", type: "string"},
        {name: "country", mapping:"address.country", type: "string"},
        {name: "postalCode", mapping:"address.postalCode", type: "string"},
        {name: "city", mapping:"address.city", type: "string"},
				
				{name: "plantAreaSqmPerson", mapping:"ugPersonInfo.plantAreaSqm", type: "string"},
        {name: "plantAreaMuPerson", mapping:"ugPersonInfo.plantAreaMu", type: "string"},
        {name: "plantInfoPerson", mapping:"ugPersonInfo.plantInfo", type: "string"},
        {name: "brokerItems", mapping:"ugPersonInfo.brokerItems", type: "string"},
        {name: "brokerInfo", mapping:"ugPersonInfo.brokerInfo", type: "string"},
        {name: "expertItems", mapping:"ugPersonInfo.expertItems", type: "string"},
        {name: "resume", mapping:"ugPersonInfo.resume", type: "string"},
        {name: "icReg", mapping:"ugPersonInfo.icReg", type: "boolean"},
        {name: "plant", mapping:"ugPersonInfo.plant", type: "boolean"},
        {name: "base", mapping:"ugPersonInfo.base", type: "boolean"},
        {name: "broker", mapping:"ugPersonInfo.broker", type: "boolean"},
        {name: "expert", mapping:"ugPersonInfo.expert", type: "boolean"},
        
        
        {name: "corpBase", mapping:"ugCompanyInfo.corpBase", type: "boolean"},
        {name: "fungus", mapping:"ugCompanyInfo.fungus", type: "boolean"},
        {name: "export", mapping:"ugCompanyInfo.export", type: "boolean"},
        {name: "tech", mapping:"ugCompanyInfo.tech", type: "boolean"},
        {name: "agent", mapping:"ugCompanyInfo.agent", type: "boolean"},
        {name: "machine", mapping:"ugCompanyInfo.machine", type: "boolean"},
        {name: "store", mapping:"ugCompanyInfo.store", type: "boolean"},
        {name: "pack", mapping:"ugCompanyInfo.pack", type: "boolean"},
        
        {name: "groupIcReg", mapping:"ugTeamInfo.groupIcReg", type: "boolean"},
        {name: "groupBaseTeam", mapping:"ugTeamInfo.groupBase", type: "boolean"},
        {name: "plantAreaSqmTeam", mapping:"ugTeamInfo.plantAreaSqm", type: "string"},
        {name: "plantAreaMuTeam", mapping:"ugTeamInfo.plantAreaMu", type: "string"},
        {name: "plantInfoTeam", mapping:"ugTeamInfo.plantInfo", type: "string"},
        
        {name: "groupBaseGov", mapping:"ugGovermentInfo.groupBase", type: "boolean"},
        {name: "plantAreaSqmGov", mapping:"ugGovermentInfo.plantAreaSqm", type: "string"},
        {name: "plantAreaMuGov", mapping:"ugGovermentInfo.plantAreaMu", type: "string"},
        {name: "plantInfoGov", mapping:"ugGovermentInfo.plantInfo", type: "string"}

    ]);
                        
    var expander = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
        				'<table border="0">',
        				'<tbody>',
        				'<tr><td align="right"><b>' + $value('_p_contact_contactname') + ':</b></td><td>{contactName}</td><td align="right"><b>' + $value('_p_contact_contactdept') + ':</b></td><td>{contactDept}</td></tr>',
        				'<tr><td align="right"><b>' + $value('_p_contact_contactpost') + ':</b></td><td>{contactPost}</td><td align="right"><b>' + $value('_p_contact_phonenumber') + ':</b></td><td>{phoneNumber}</td></tr>',
        				'<tr><td align="right"><b>' + $value('_mobile') + ':</b></td><td>{mobile}</td><td align="right"><b>' + $value('_p_contact_faxNo') + ':</b></td><td>{faxNo}</td></tr>',
        				'<tr><td align="right"><b>' + $value('_p_contact_website') + ':</b></td><td><a href="{website}" target="bank"> {website} </a></td><td align="right"><b>' + $value('_address_province') + ':</b></td><td>{province}</td></tr>',
        				'<tr><td align="right"><b>' + $value('_p_contact_contactpost') + ':</b></td><td>{city}</td><td align="right"><b>' + $value('_address_country') + ':</b></td><td>{country}</td></tr>',
        				'<tr><td align="right"><b>' + $value('_address_postalcode') + ':</b></td><td>{postalCode}</td><td align="right"><b>' + $value('_address_address') + ':</b></td><td>{address}</td></tr>',
        				'<tr><td align="right"><b>' + $value('_account_regdate') + ':</b></td><td>{regDate}</td><td align="right"><b>' + $value('_account_note') + ':</b></td><td>{remark}</td></tr>',
        				'</tbody>',
        				'</table>'
                )
    });
    
    var store = new Ext.data.GroupingStore({
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'totalCount',
            id: 'id',
            fields: NewAccount
        }),
        proxy:new Ext.data.ScriptTagProxy({
            url: '/admin/jsonusers.html?ajax=true'
        }),
        sortInfo:{field: 'regDate', direction: "desc"},
        groupField:'userGroup',
        remoteSort: true
    });


    var cm = new Ext.grid.ColumnModel([
        //new Ext.grid.RowNumberer(),
        {
            id: 'id',
            header: "Identify",
            dataIndex: 'id',
            width: 80,
            hidden:true
        },{
        header:$value('_account_usergroup'),
        dataIndex:'userGroup',
        width:80,
        hidden:true
    },{
        header: "<img src='../../../images/extii/shared/icons/fam/member.png'/>",
        dataIndex:'sex',
        width:5,
        renderer:renderSex
    },{
        header: $value('_account_username'),
        dataIndex:'username',
        width:80
    },{
        header:$value('_account_email'),
        dataIndex:'email',
        width:100,
        renderer:renderEmail
    },{
        header:$value('_qqmsn'),
        dataIndex:'netTouch',
        width:80
    },{
        header:$value('_address_city'),
        dataIndex:'city',
        width:50
    },{
        header:$value('_account_enabled'),
        dataIndex:'enabled',
        width:35,
        renderer:renderEnabled
    },{
        header:$value('_account_regdate'),
        dataIndex:'regDate',
        width:80,
        render:formatDates,
        hidden:true
    },
        expander]);


    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:780,
        height:450,
        title:'ExtJS.com - Browse Forums',
        iconCls:'icon-grid',
        plugins: expander,
        collapsible: true,
        store: store,
        cm: cm,
        trackMouseOver:true,
        stripeRows: true,
        loadMask: true,
        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
        viewConfig: {
            forceFit:true,
            enableRowBody:true
        },
        tbar:['-',{
            text:'Add User',
            tooltip:'Add a new User',
            iconCls:'add',
            handler: function(){jron_add(store);}
        },'-', {
            text: 'Delete User',
            tooltip:'Delete an User',
            iconCls:'remove',
            handler: function(){jron_del(store, grid);}
        },'-', {
            text: 'Detail View',
            tooltip:'View the detail Information of the selected user',
            iconCls:'view',
            handler: doView
        }],

        bbar: new Ext.PagingToolbar({
            pageSize: jpageSize,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying users {0} - {1} of {2}',
            emptyMsg: "No users to display",
            items:[]
        })

    });


    // render it
    grid.render();

    var tb = grid.getTopToolbar();
    tb.addSeparator();

    filterBtn = new Ext.Toolbar.MenuButton({
        iconCls: 'x-btn-text-icon option',
        cls: 'x-btn-text-icon',
        text: $value('_btn_filter'),
        tooltip: $value('_btn_filter_tip'),
        menu: {items: [
            new Ext.menu.CheckItem({ text: $value('_address_city'), value: 'address.city', checked: false, group: 'filter', checkHandler: onItemCheck }),
            new Ext.menu.CheckItem({ text: $value('_account_email'), value: 'email', checked: false, group: 'filter', checkHandler: onItemCheck }),
            new Ext.menu.CheckItem({ text: $value('_account_username'), value: 'username', checked: false, group: 'filter', checkHandler: onItemCheck })
        ]},
        minWidth: 105
    });

    tb.add(filterBtn);
    
    var filter = new Ext.app.SearchField({
	                width:240,
					store: store,
					paramName: 'q'
	            });
	            
		tb.add(filter);	            
    
    function onItemCheck(item, checked)
    {
        if (checked) {
            filterBtn.setText(item.text + ':');
            filerTxt = item.value;
        }
    }

    store.on('beforeload', function() {
        store.baseParams = { // modify the baseParams setting for this request
            filterValue: filter.getValue(),
            filterTxt: filerTxt
        };
    });

    // trigger the data store load
    store.load({params:{start:0, limit:jpageSize}});
    
    grid.on('rowdblclick', function(gridPanel, rowIndex, e) {
	    var selectedId = store.data.items[rowIndex].id;  
	    //var userGroup = store.data.items[rowIndex].data["userGroup"];  
	    new jron_edit(store, selectedId,NewAccount,store.data.items[rowIndex].data);  
		}); 	
        
    function doView(btn,pressed){
    	
    }
    
});

Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        if(!this.store.baseParams){
			this.store.baseParams = {};
		}
		Ext.app.SearchField.superclass.initComponent.call(this);
		this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramName : 'query',

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
            var o = {start: 0, limit:jpageSize};
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramName] = '';
            this.store.reload({params:o});
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
		if(v.length < 2){
			Ext.Msg.alert('Invalid Search', 'You must enter a minimum of 2 characters to search the user');
			return;
		}
		if(filerTxt == 'jron'){
			Ext.Msg.alert('Invalid Search', 'You must select a property to filter');
			return;
		}
		
		this.store.baseParams[this.paramName] = v;
        var o = {start: 0, limit:jpageSize};
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
		this.focus();
    }
});


var jron_add = function(dataStore) {

    // pre-define fields in the form
	var lastname = new Ext.form.TextField({
        fieldLabel: 'Last Name',
        allowBlank: false,
        name: 'lastname',
        anchor: '90%' 
    });
    
	var firstname = new Ext.form.TextField({
        fieldLabel: 'First Name',
        allowBlank: false,
        name: 'firstname',
        anchor: '90%'  
    });  

	var username = new Ext.form.TextField({
        fieldLabel: 'User Name',
        allowBlank: false,
        name: 'username',
        anchor: '90%'  
    });

	var password = new Ext.form.TextField({
        fieldLabel: 'Password',
        allowBlank: false,
        inputType: 'password',
        name: 'password',
        anchor: '90%'    
    });
    
	var email = new Ext.form.TextField({
	    vtype: 'email',
        fieldLabel: 'Email',           
        name: 'email',
        anchor: '90%'     
    });  
    
    var birthday = new Ext.form.DateField({
        fieldLabel: 'Birthday',           
        name: 'birthday',
        format:'M d, Y',
        anchor: '60%'   
    });  
    
    var note = new Ext.form.TextField({
        xtype: 'textarea',
        hideLabel: true,
        name: 'note',
        anchor: '100% -35'  // anchor width by percentage and height by raw adjustment 
    }); 

    var formPanel = new Ext.form.FormPanel({
  
        baseCls: 'x-plain',
        labelWidth: 75,
        url:'demouser/listDemouser.htm?action=createDemouser',
        defaultType: 'textfield',

        items: [
            lastname, 
            firstname,
            username,
            password,
            email,
            birthday,
            note   
		]
    });

    // define window and show it in desktop
    var window = new Ext.Window({
        title: 'Add New Demo User to System',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 250,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: formPanel,

        buttons: [{
            text: 'Save', 
            handler: function() {
                // check form value 
                if (formPanel.form.isValid()) {
	 		        formPanel.form.submit({			      
			            waitMsg:'In processing',
			            failure: function(form, action) {
						    Ext.MessageBox.alert('Error Message', action.result.errorInfo);
						},
						success: function(form, action) {
						    Ext.MessageBox.alert('Confirm', action.result.info);
						    window.hide();
						    dataStore.load({params:{start:0, limit:jpageSize}});
						}
			        });                   
                } else{
					Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
				}             
	        }
        },{
            text: 'Cancel',
            handler: function(){window.hide();}
        }]
    });

    window.show();
};


var jron_del = function(dataStore, gridPanel) {

    // get the selected items
    var m = gridPanel.getSelections();
    if(m.length > 0)
    {
    	Ext.MessageBox.confirm('Message', 
    	    'Do you really want to delete them?', 
    	    function(btn) {
	    	     if(btn == 'yes')
		         {	
					var jsonData = "[";
			        for(var i = 0, len = m.length; i < len; i++){        		
						var ss = "{\"id\":\"" + m[i].get("id") + "\"}";
						if(i==0)
			           		jsonData = jsonData + ss ;
					   	else
							jsonData = jsonData + "," + ss;	
						dataStore.remove(m[i]);								
			        }	
					jsonData = jsonData + "]";
					dataStore.load({params:{start:0, limit:10, delData:jsonData}});		
			    }
		    } 
		);	
    }
    else
    {
    	Ext.MessageBox.alert('Error', 
    	    'To process delete action, please select at least one item to continue'
    	);
    }       

};



var jron_edit = function(dataStore, selectedId,NewAccount,rec) {
	
    // create form panel
    var formPanel = new Ext.FormPanel({
        
        baseCls: 'x-plain',
        labelWidth: 150,
        bodyStyle:'padding:5px',
        //width: 600,
        url:'/admin/jsonusers!jsonUpdateUser.html?ajax=true&from=JronExt',
        
        //reader: new Ext.data.JsonReader({}, NewAccount),
				items: [{
					title: $value('_account_msg'),
					labelAlign: 'top',
            layout:'column',
            border:true,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: $value('_account_username'),
                    name: 'username',
                    value: rec['username'],
                    readOnly:true,
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: $value('_account_email'),
                    name: 'email',
                    value: rec['email'],
                    readOnly:true,
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: $value('_qqmsn'),
                    name: 'netTouch',
                    value: rec['netTouch'],
                    readOnly:true,
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Signup Date',
                    name: 'regDate',
                    value: rec['regDate'],
                    readOnly:true,
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            enableTabScroll:true,
            height:245,
            defaults:{bodyStyle:'padding:10px'},
            id:'tabtab',
            items:[{
                title:$value('_p_contact_msg'),
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: $value('_p_contact_contactname'),
                    name: 'contactName',
                    value: rec['contactName']
                },{
                    fieldLabel: $value('_p_contact_contactdept'),
                    name: 'contactDept',
                    value: rec['contactDept']
                },{
                    fieldLabel: $value('_p_contact_contactpost'),
                    name: 'contactPost',
                    value: rec['contactPost']
                },{
                    fieldLabel: $value('_p_contact_phonenumber'),
                    name: 'phoneNumber',
                    value: rec['phoneNumber']
                },{
                    fieldLabel: $value('_mobile'),
                    name: 'mobile',
                    value: rec['mobile']
                },{
                    fieldLabel: $value('_qqmsn'),
                    name: 'netTouch',
                    value: rec['netTouch']
                },{
                    fieldLabel: $value('_p_contact_website'),
                    name: 'website',
                    value: rec['website']
                },{
                    fieldLabel: $value('_p_contact_faxNo'),
                    name: 'faxNo',
                    value: rec['faxNo']
                }]
            }]
        }]
	});
		
    // load form and assign value to fields
    //formPanel.form.load({url:'/admin/jsonusers!jsonUser.html?ajax=true&from=ExtUpdate&id='+selectedId,waitMsg:'Loading'});    
                                               
    // define window and show it in desktop
    var window = new Ext.Window({
        title: 'Edit Existing Demo User',
        width: 700,
        height:500,
        minWidth: 300,
        minHeight: 250,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: formPanel,

        buttons: [{
            text: 'Save', 
            handler: function() {
                // check form value 
                if (formPanel.form.isValid()) {
	 		        formPanel.form.submit({		
	 		            params:{id : selectedId},	      
			            waitMsg:'In processing',
			            failure: function(form, action) {
						    Ext.MessageBox.alert('Error Message', action.result.errorInfo);
						},
						success: function(form, action) {
						    Ext.MessageBox.alert('Confirm', action.result.info);
						    window.hide();
						    dataStore.load({params:{start:0, limit:jpageSize}});
						}
			        });                   
                } else{
					Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
				}             
	        }
        },{
            text: 'Cancel',
            handler: function(){window.hide();}
        }]
    });
    
    var ug = rec['userGroup'];
    var ta = formPanel.getComponent('tabtab');
    
    if(ug=="COMPANY"){
    	ta.insert(0,component_icreg($value('_c_company_msg')));   
         		
    	ta.add({
            title:$value('_account_usergroup') + ":" + $value('_ug_company'),
            html: companyDesc()
        }).show();
        
      ta.add(component_address($value('_company_address'))).show();
        
    }
    
    if(ug=="TEAM"){
    	ta.insert(0,component_address($value('_t_team_msg')));   
    	
    	ta.add({
            title:$value('_account_usergroup') + ":" + $value('_ug_team'),
            html: teamDesc()
        }).show();
        
    	if(rec['groupIcReg']){
         ta.add(component_icreg($value('_p_icreg_msg'))).show();   
       }     	
       
       if(rec['groupBaseTeam']){
         component_plant();
       }     	
    }
    
    if(ug=="GOVERMENT"){
    	ta.insert(0,component_address($value('_g_goverment_msg')));   
    	
    	ta.add({
            title:$value('_account_usergroup') + ":" + $value('_ug_goverment'),
            html: govermentDesc()
        }).show();
     
      if(rec['groupBaseGov']){
         component_plant();
       } 
       
    }
    
    //if(ug=="OPERATION"){}
    
    if(ug=="PERSON"){
    	var nu = 1;
    	ta.insert(0,{
    						title:$value('_p_person_msg'),
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: $value('_account_lastName'),
                    name: 'firstName',
                    allowBlank:false,
                    value: rec['firstName']
                },{
                    fieldLabel: $value('_account_firstName'),
                    name: 'lastName',
                    value: rec['lastName']
                },{
                    fieldLabel: $value('_account_idcard'),
                    name: 'idcard',
                    value: rec['idcard']
                }]}
         );           
          
         ta.insert(nu++,{
         	title:$value('_account_usergroup') + ":" + $value('_ug_person'),
         	html:groupDesc()
         	});   
                 	
         	if(rec['icReg']){
         		ta.insert(nu++,component_icreg($value('_p_icreg_msg')));   
         	}     	
         	      
         	if(rec['plant']){
         		component_plant();
         	}
         	
         	if(rec['broker']){
         		ta.insert(nu++,{
		         	title:$value('_p_broker_msg'),
		         	layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: $value('_p_broker_brokeritems'),
                    name: 'brokerItems',
                    value: rec['brokerItems']
                },{
                		xtype:'textarea',
                    fieldLabel: $value('_p_broker_brokerinfo'),
                    name: 'brokerInfo',
                    value: rec['brokerInfo']
                }]
		         	});  
         	}
         	  					  
         	if(rec['expert']){
         		ta.insert(nu++,{
		         	title:$value('_p_expert_msg'),
		         	layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: $value('_p_expert_expertitems'),
                    name: 'expertItems',
                    value: rec['expertItems']
                },{
                		xtype:'textarea',
                    fieldLabel: $value('_p_expert_resume'),
                    name: 'resume',
                    value: rec['resume']
                }]
		         	});  
         	}
         	
         	ta.insert(nu++,component_address($value('_general_address')));   
         	
      formPanel.render(document.body);

    }

		ta.add({
	         	title:$value('_tap_addition'),
	         	html:htmlDesc()
	      }).show();      
            
    window.show();
    
    function component_plant(){
    	var tle,pas_v,pam_v,pi_v;
    	
    	if(ug=="PERSON"){
    		pas_v = rec['plantAreaSqmPerson'];
    		pam_v = rec['plantAreaMuPerson'];
    		pi_v = rec['plantInfoPerson'];
    	}
    	
    	if(ug=="TEAM"){
    		pas_v = rec['plantAreaSqmTeam'];
    		pam_v = rec['plantAreaMuTeam'];
    		pi_v = rec['plantInfoTeam'];
    	}
    	
    	if(ug=="GOVERMENT"){
    		pas_v = rec['plantAreaSqmGov'];
    		pam_v = rec['plantAreaMuGov'];
    		pi_v = rec['plantInfoGov'];
    	}
    	
    	ta.add({
		         	title:$value('_p_plant_msg'),
		         	layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: $value('_p_plant_plantareasqm'),
                    name: 'plantAreaSqm',
                    value: pas_v
                },{
                    fieldLabel: $value('_p_plant_plantareamu'),
                    name: 'plantAreaMu',
                    value: pam_v
                },{
                		xtype:'textarea',
                    fieldLabel: $value('_p_plant_plantinfo'),
                    name: 'plantInfo',
                    value: pi_v
                }]
		         	}).show();  
    }
    
    function component_address(tle){
    	return {
    		title:tle,
		         	layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [forTeamGoverment(),{
                    fieldLabel: $value('_address_address'),
                    name: 'address',
                    value: rec['address']
                },{
                    fieldLabel: $value('_address_province'),
                    name: 'province',
                    value: rec['province']
                },{
                    fieldLabel: $value('_address_city'),
                    name: 'city',
                    value: rec['city']
                },{
                    fieldLabel: $value('_address_country'),
                    name: 'country',
                    value: rec['country']
                },{
                    fieldLabel: $value('_address_postalcode'),
                    name: 'postalCode',
                    value: rec['postalCode']
                }]
    	};
    }
    
    function forTeamGoverment(){
    	var r;
    	if(ug=="TEAM"){
    		r = {
              fieldLabel: $value('_cotact_companyname_team'),
              name: 'companyName',
              value: rec['companyName']      
            };
    	}
    	else if(ug=="GOVERMENT"){
    		r = {
              fieldLabel: $value('_cotact_companyname_goverment'),
              name: 'companyName',
              value: rec['companyName']      
            };
    	}
    	else {
    		r = {Height:0,labelSeparator:" ",hidden:true};
    	}
    	return r;
    }
    
    function component_icreg(tle){
    	return {
		         	title:tle,
		         	layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: $value('_p_icreg_registerid'),
                    name: 'registerId',
                    value: rec['registerId']
                },{
                    fieldLabel: $value('_p_icreg_companyname'),
                    name: 'companyName',
                    value: rec['companyName']
                },{
                    fieldLabel: $value('_p_icreg_registermoney'),
                    name: 'registerYear',
                    value: rec['registerYear']
                },{
                    fieldLabel: $value('_p_icreg_registeryear'),
                    name: 'registerMoney',
                    value: rec['registerMoney']
                },{
                    fieldLabel: $value('_p_icreg_registercapital'),
                    name: 'registerCapital',
                    value: rec['registerCapital']
                }]
		         	};
    }
    
    function teamDesc(){
    	_t_groupicreg = '<label>' + $value('_t_groupicreg') + '</label>';
    	
    	var r = '<table><tbody>'
    	
        + '<tr><td>' + _t_groupicreg + "</td><td>" + YNRender(rec['groupIcReg'],'groupicreg','groupIcReg') + '</td></tr>'
        
        + team_govermentDesc(rec['groupBaseTeam'],'groupBaseTeam')
        
        + '</tbody></table>';
    	return r;
    }
    
    function govermentDesc(){
    	
    	var r = '<table><tbody>'
    	
       	+ team_govermentDesc(rec['groupBaseGov'],'groupBaseGov')
        
        + '</tbody></table>';
    	return r;
    }
    
    function team_govermentDesc(value,elid){
    	_t_g_groupbase = '<label>' + $value('_t_g_groupbase') + '</label>';
    	return '<tr><td>' + _t_g_groupbase + "</td><td>" + YNRender(value,elid,'groupBase') + '</td></tr>';
    }
    
    function companyDesc(){
    	_c_corpbase = '<label>' + $value('_c_corpbase') + '</label>';
    	_c_fungus = '<label>' + $value('_c_fungus') + '</label>';
    	_c_export = '<label>' + $value('_c_export') + '</label>';
    	_c_tech = '<label>' + $value('_c_tech') + '</label>';
    	_c_agent = '<label>' + $value('_c_agent') + '</label>';
    	_c_machine = '<label>' + $value('_c_machine') + '</label>';
    	_c_pack = '<label>' + $value('_c_pack') + '</label>';
    	_c_store = '<label>' + $value('_c_store') + '</label>';
    	
    	var r = '<table><tbody>'
    	
        + '<tr><td>' + _c_corpbase + "</td><td>" + YNRender(rec['corpBase'],'corpbase','corpBase') + '</td></tr>'
        + '<tr><td>' + _c_fungus + "</td><td>" + YNRender(rec['fungus'],'fungus','fungus') + '</td></tr>'
        + '<tr><td>' + _c_export + "</td><td>" + YNRender(rec['export'],'export','export') + '</td></tr>'
        + '<tr><td>' + _c_tech + "</td><td>" + YNRender(rec['tech'],'tech','tech') + '</td></tr>'
        + '<tr><td>' + _c_agent + "</td><td>" + YNRender(rec['agent'],'agent','agent') + '</td></tr>'
        + '<tr><td>' + _c_machine + "</td><td>" + YNRender(rec['machine'],'machine','machine') + '</td></tr>'
        + '<tr><td>' + _c_store + "</td><td>" + YNRender(rec['store'],'store','store') + '</td></tr>'
        + '<tr><td>' + _c_pack + "</td><td>" + YNRender(rec['pack'],'pack','pack') + '</td></tr>'
        
        + '</tbody></table>';
    	return r;
    }
    
    function groupDesc(){
    	icreg_l = '<label>' + $value('_p_icreg') + '</label>';
    	base_l = '<label>' + $value('_p_base') + '</label>';
    	plant_l = '<label>' + $value('_p_plant') + '</label>';
    	broker_l = '<label>' + $value('_p_broker') + '</label>';
    	expert_l = '<label>' + $value('_p_expert') + '</label>';
    	
    	var r = '<table><tbody>'
    	
        + '<tr><td>' + icreg_l + "</td><td>" + YNRender(rec['icReg'],'icreg','icReg') + '</td></tr>'
        + '<tr><td>' + plant_l + "</td><td>" + YNRender(rec['plant'],'plant','plant') + '</td></tr>';
        
        if(rec['plant']){
        	r += '<tr><td>' + base_l + "</td><td>" + YNRender(rec['base'],'base','base') + '</td></tr>';
        }
        r += '<tr><td>' + broker_l + "</td><td>" + YNRender(rec['broker'],'broker','broker') + '</td></tr>'
        + '<tr><td>' + expert_l + "</td><td>" + YNRender(rec['expert'],'expert','expert') + '</td></tr>'
        				
        + '</tbody></table>';
    	return r;
    }
    
    function htmlDesc(){
    	var mobile_label = '<label>' + $value('_mobile') + " : " + rec['mobile'] + " - " + $value('_ispublic') + '</label>';
    	var qqmsn_label = '<label>' + $value('_qqmsn') + " : " + rec['netTouch'] + " - " + $value('_ispublic') + '</label>';
    	var sex_label_ =  '<label> <img src="../../../images/extii/shared/icons/fam/member.png"/>' + $value('_sexlabel') + ' : </label>';
    	    	
    	r = '<table><tbody>';
    	
    		if(ug=="PERSON")
    			r += '<tr><td>' + '<label>' + $value('_account_fullname') + '</label>' + "</td><td>" + fullname() + '</td></tr>';
    		
        r += '<tr>' + sex_label_ + sexRender(rec['sex']) + '</tr>'
        + '<tr><td>' + mobile_label + "</td><td>" + YNRender(rec['mobilePub'],'mobilepub','mobilePub') + '</td></tr>'
        + '<tr><td>' + qqmsn_label + "</td><td>" + YNRender(rec['netTouchPub'],'qqmsn','netTouchPub') + '</td></tr>'
        				
        + '</tbody></table>';
    	return r;
    }
    
    function fullname(){
    	_locale = $value('_locale');
    	var fname = rec['firstName'] + " " + rec['lastName'];
    	if(_locale == "zh"){
    		 fname = rec['lastName'] + " " + rec['firstName'];
    		}
    	return fname;
    }
    
    function YNRender(value,elid,elname){
    	var retu;
    	var r = '<label for=yes' + elid + selectedId + '>' + $value('_pubyes') + '</label>';
    	 		
    	var s = '<label for=no' + elid + selectedId + '>' + $value('_pubno') + '</label>';
    	
    	if (value){
    		retu = r + ' <input id=yes' + elid + selectedId + ' type=radio name=' + elname + ' value=true checked=true /> \t' 
    				 + s + ' <input type=radio name=' + elname + ' value=false id=no' + elid + selectedId + ' />';
    	}
    	else if (!value){
    		retu = r + ' <input id=yes' + elid + selectedId + ' type=radio name=' + elname + ' value=true /> \t' 
    				 + s + ' <input type=radio name=' + elname + ' value=false id=no' + elid + selectedId + ' checked=true />';
    	}
    	else{
    		retu = r + ' <input id=yes' + elid + selectedId + ' type=radio name=' + elname + ' value=true /> \t' 
    				 + s + ' <input type=radio name=' + elname + ' value=false id=no' + elid + selectedId + ' />';
    	}
    	return retu;
    }
    
    function sexRender(value){
    	var retu;
    	var r = '<label for=male> <img src="../../../images/extii/shared/icons/fam/user_suit.png"/>' + $value('_sex_male_label') + '</label>';
    	 		
    	var s = '<label for=female> <img src="../../../images/extii/shared/icons/fam/user_female.png"/>' + $value('_sex_female_label') + '</label>';
    	
    	if (value == 'MALE'){
    		retu = r + ' <input id=male type=radio name=sex value=0 checked=true /> \t' 
    				 + s + ' <input type=radio name=sex value=1 id=female />';
    	}
    	else if (value == 'FEMALE'){
    		retu = r + ' <input id=male type=radio name=sex value=0 /> \t' 
    				 + s + ' <input type=radio name=sex value=1 id=female checked=true />';
    	}
    	else{
    		retu = r + ' <input id=male type=radio name=sex value=0 /> \t' 
    				 + s + ' <input type=radio name=sex value=1 id=female />';
    	}
    	return retu;
    }
            
    //alert(formPanel.getForm().findField('username'));
};

</script>
